<template>
  <el-container>
    <el-main>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>主页</el-breadcrumb-item>
      </el-breadcrumb>
      <el-row :gutter="20">
        <el-col :span="6" :offset="6"
          ><div class="grid-content bg-purple">
            <strong style="margin-left: 140px"></strong
            >会议主题:{{ this.faceData.conferenceTheme }}
          </div></el-col
        >
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <div class="info-left">
              <!--            <div class="process1">{{this.faceData.userName}}</div>-->
              <div class="process1">会议内容:</div>
              <div class="process2">{{ this.faceData.contentDescription }}</div>
              <div class="process3">{{ process3 }}</div>
              <div class="process4">{{ process4 }}</div>
            </div>
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <video
              v-if="isShow"
              style="margin-left: 60px"
              id="videoCamera"
              :width="videoWidth"
              :height="videoHeight"
              autoplay
            ></video>
            <canvas
              v-show="!isShow"
              style="margin-left: 60px"
              id="canvas"
              :width="videoWidth"
              :height="videoHeight"
            ></canvas>
          </div>
          <div style="text-align: center">
            <el-button class="bt1" @click="getCompetence()"
              >打开摄像头</el-button
            >
            <el-button class="bt2" @click="stopNavigator()"
              >关闭摄像头</el-button
            >
          </div>
        </el-col>
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <div class="info-right">
              <div class="information1">{{ hostMan }}</div>
              <div class="information2">{{ this.faceData.userName }}</div>
              <div class="information4">
                {{ beginTime + this.faceData.startTime }}
              </div>
              <div class="information4">
                {{ endTime1 + this.faceData.endTime }}
              </div>
            </div>
          </div></el-col
        >
      </el-row>
      <el-row :gutter="20" style="margin-left: 500px">
        <el-col :span="4"
          ><div class="grid-content bg-purple">
            <el-button class="bt3" @click="sign">点击签到</el-button>
          </div></el-col
        >
        <el-button class="bt4" @click="sign1">点击登录</el-button>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import request from "../../utils/request";
export default {
  name: "Homepage",
  data() {
    return {
      isShow: true,
      Signed: 5,
      rate: 50,
      person: 60,
      videoWidth: 300,
      videoHeight: 300,
      thisVideo: null,
      process2: "敬请期待",
      process3: "敬请期待",
      process4: "敬请期待",
      hostMan: "主持人:",
      beginTime: "开始时间：",
      endTime1: "结束时间：",
      faceData: {
        address: null,
        conferenceTheme: null,
        contentDescription: null,
        endTime: null,
        startTime: null,
        state: null,
        userName: null,
        userVo: null,
      },
      file: "",
    };
  },
  methods: {
    sign1() {
      this.$router.push({ name: "/login" });
    },

    // 签到函数
    sign() {
      this.isShow = false;
      //获得Canvas对象
      const video = document.getElementById("videoCamera");
      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");
      ctx.drawImage(video, 0, 0, 340, 340);

      // toDataURL  ---  可传入'image/png'---默认, 'image/jpeg'
      this.file = document.getElementById("canvas").toDataURL();

      request
        .post("/user/selectFace", this.file)
        .then((res) => {
          this.isShow = true;
          let meeting = JSON.parse(sessionStorage.getItem("meeting"));
          request
            .post("/punchCad/signIn", {
              meeting_id: meeting.meetingId,
              user_id: res.data.userId,
            })
            .then((res) => {
              if (res.code === "200") {
                this.$message({
                  message: res.message,
                  type: "success",
                });
              }else{
                this.$message.error(res.message);
              }
            });
          console.log(res);
        })
        .catch((res) => {
          this.isShow = true;
          this.$message.error("网络错误，请稍后重试");
        });
    },

    getCompetence() {
      var _this = this;
      this.thisCancas = document.getElementById("canvasCamera");

      this.thisVideo = document.getElementById("videoCamera");

      // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象

      if (navigator.mediaDevices === undefined) {
        navigator.mediaDevices = {};
      }

      // 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象

      // 使用getUserMedia，因为它会覆盖现有的属性。

      // 这里，如果缺少getUserMedia属性，就添加它。

      if (navigator.mediaDevices.getUserMedia === undefined) {
        navigator.mediaDevices.getUserMedia = function (constraints) {
          // 首先获取现存的getUserMedia(如果存在)

          var getUserMedia =
            navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia ||
            navigator.getUserMedia;

          // 有些浏览器不支持，会返回错误信息

          // 保持接口一致

          if (!getUserMedia) {
            return Promise.reject(
              new Error("getUserMedia is not implemented in this browser")
            );
          }

          // 否则，使用Promise将调用包装到旧的navigator.getUserMedia

          return new Promise(function (resolve, reject) {
            getUserMedia.call(navigator, constraints, resolve, reject);
          });
        };
      }

      var constraints = {
        audio: false,
        video: {
          width: this.videoWidth,
          height: this.videoHeight,
          transform: "scaleX(-1)",
        },
      };

      navigator.mediaDevices
        .getUserMedia(constraints)
        .then(function (stream) {
          // 旧的浏览器可能没有srcObject

          if ("srcObject" in _this.thisVideo) {
            _this.thisVideo.srcObject = stream;
          } else {
            // 避免在新的浏览器中使用它，因为它正在被弃用。

            _this.thisVideo.src = window.URL.createObjectURL(stream);
          }

          _this.thisVideo.onloadedmetadata = function (e) {
            _this.thisVideo.play();
          };
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 关闭摄像头
    stopNavigator() {
      this.thisVideo.srcObject.getTracks()[0].stop();
    },

    // 初始化获取数据
    getData() {
      // 发送请求获取数据
      request
        .get("/meeting/SelectOneMeeting")
        .then((res) => {
          // var _this = this
          this.faceData = res[0];
          sessionStorage.setItem("meeting", JSON.stringify(res[0]));
        })
        .catch((res) => {
          this.$message.error("网络错误，请稍后重试");
        });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style scoped lang="less">
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
p {
  float: left;
  text-align: center;
  padding-left: 100px;
  padding-top: 5px;
}
#videoCamera {
  border: #3c97bf 1px solid;
  border-radius: 50%;
}

#canvas {
  border: #3c97bf 1px solid;
  border-radius: 50%;
}
.bt1 {
  width: 95px;
  height: 30px;
  padding-left: 12px;
  padding-top: 10px;
}
.bt2 {
  width: 95px;
  height: 30px;
  padding-left: 12px;
  padding-top: 10px;
}
.information1 {
  width: 100%;
  height: 40px;
  background-color: #3c97bf;
  padding-top: 20px;
  padding-left: 20px;
  text-align: center;
  background-image: url("../../static/82.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.information2 {
  margin-top: 10px;
  width: 100%;
  height: 40px;
  background-color: #3c97bf;
  padding-top: 20px;
  padding-left: 20px;
  text-align: center;
  background-image: url("../../static/82.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.information3 {
  margin-top: 10px;
  width: 100%;
  height: 40px;
  background-color: #3c97bf;
  padding-top: 20px;
  padding-left: 20px;
  text-align: center;
  background-image: url("../../static/82.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.information4 {
  margin-top: 10px;
  width: 100%;
  height: 40px;
  background-color: #3c97bf;
  padding-top: 20px;
  padding-left: 20px;
  text-align: center;
  background-image: url("../../static/82.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.process1 {
  margin-top: 10px;
  width: 100%;
  height: 40px;
  background-color: #3c97bf;
  padding-top: 20px;
  padding-left: 20px;
  text-align: center;
  background-image: url("../../static/info-left.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.process2 {
  margin-top: 10px;
  width: 100%;
  height: 40px;
  background-color: #3c97bf;
  padding-top: 20px;
  padding-left: 20px;
  text-align: center;
  background-image: url("../../static/info-left.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.process3 {
  margin-top: 10px;
  width: 100%;
  height: 40px;
  background-color: #3c97bf;
  padding-top: 20px;
  padding-left: 20px;
  text-align: center;
  background-image: url("../../static/info-left.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.process4 {
  margin-top: 10px;
  width: 100%;
  height: 40px;
  background-color: #3c97bf;
  padding-top: 20px;
  padding-left: 20px;
  text-align: center;
  background-image: url("../../static/info-left.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.bt3 {
  width: 100%;
  height: 35px;
}
.btn4 {
  width: 100%;
  height: 35px;
  margin-left: 10px;
}
</style>
